<script setup>
import commonTable from '@/components/commonTable.vue'
import roleDialog from './components/roleDialog.vue'
import AllocateMenuDialog from './components/AllocateMenuDialog.vue'
import {
  getRoleListDataAsync,
  getRoleInfoAsync,
  deleteRoleInfoAsync,
  getRoleMenuListAysnc
} from '@/api/roleManagement'
import { onMounted } from 'vue';
import { ElMessage } from 'element-plus';

//关键词搜索
const formData = ref({
  key: ''
})

const tableData = ref([])
const tableHeader = ref([
  {
    data: {
      prop: 'id',
      label: '编号',
      width: '80',
    },
  },
  {
    data: {
      prop: 'roleName',
      label: '角色名称',
    },
  }, {
    data: {
      prop: 'roleDesc',
      label: '角色描述',
    },
  },
  {
    data: {
      prop: 'orderRank',
      label: '排序',
      width: '80'
    }
  },
  {
    slot: 'operate',
    data: {
      label: '操作'
    }
  }
])

const pagination = ref({
  size: 10,
  total: 10,
  curPage: 1,
  pageSizes: [3, 5, 10, 20]

})
// 表格加载动画
const isLoading = ref(false)

//获取表格数据
const getTabelData = async () => {
  try {
    isLoading.value = true
    const params = {
      key: formData.value.key,
      currPage: pagination.value.curPage,
      pageSize: pagination.value.size
    }
    // 调接口
    const { data: res } = await getRoleListDataAsync(params)

    if (res) {
      if (res.rows && Array.isArray(res.rows) && res.rows.length) {
        tableData.value = res.rows
      } else {
        tableData.value = []
      }
      pagination.value.total = +res.total
    }

    isLoading.value = false

  } catch (error) {
    isLoading.value = false
    ElMessage.error(error)
    console.log('%c [ error ]-109', 'font-size:13px; background:pink; color:#bf2c9f;', error)

  }
}


//关键字查询 | 刷新数据
const searchHandle = () => {
  pagination.value.curPage = 1
  getTabelData()
}
//新增角色
const addHandle = () => {
  roleDialogVisbile.value = true
}

//编辑角色
const eidtRole = async (info) => {
  try {

    const res = await getRoleInfoAsync(info)
    if (res.code + '' === '200' && res.data) {
      roleInfo.value = res.data
      roleDialogVisbile.value = true
    }
  } catch (error) {
    console.log('%c [ error ]-139', 'font-size:13px; background:pink; color:#bf2c9f;', error)
  }

}

//分配菜单
const assignMenus = async (info) => {
  console.log('%c [  ]-176', 'font-size:13px; background:pink; color:#bf2c9f;', info)
  try {
    const params = {
      id: info.id
    }
    const res = await getRoleMenuListAysnc(params)

    console.log('%c [  ]-160', 'font-size:13px; background:pink; color:#bf2c9f;', res.data)
    if (res.code + '' === '200' && res.data) {
      menusInfo.value = res.data
      menuDialogVisible.value = true
    }
  } catch (error) {
    console.log('%c [ assignRoles ]-157', 'font-size:13px; background:pink; color:#bf2c9f;', error)

  }

}

//删除角色
const deletedRole = async (info) => {
  try {
    const res = await deleteRoleInfoAsync(info)
    if (res && res.code + '' === '200') {
      ElMessage.success(`成功删除角色【${info.roleName}】`)
      searchHandle()
    } else if (res && res.code + '' !== '200') {
      ElMessage.error(res.msg)
    }
  } catch (error) {
    console.log('%c [ error ]-155', 'font-size:13px; background:pink; color:#bf2c9f;', error)
  }
}


//页大小改变
const handleSizeChange = (val) => {
  pagination.value.size = val
  getTabelData()
}
//切换页
const handleCurrentChange = (val) => {
  pagination.value.curPage = val
  getTabelData()
}

//编辑的角色信息
const roleInfo = ref({})
//角色信息弹窗
const roleDialogVisbile = ref(false)

//更新或添加角色
const updateRole = () => {
  closeDialog()
  searchHandle()
}

const closeDialog = () => {
  if (Object.keys(roleInfo.value).length) {
    roleInfo.value = {}
  }
  roleDialogVisbile.value = false
}

const menuDialogVisible = ref(false)

const menusInfo = ref({})
const closeMenusDialog = (hasUpdate) => {
  if (hasUpdate) {
    ElMessage.success('成功分配菜单权限！')
    getTabelData()
  }
  menuDialogVisible.value = false
}

onMounted(() => {
  getTabelData()
})

</script>

<template>
  <div class="role-container">
    <el-card>
      <template #header>
        <div class='card-header'>
          <el-form>
            <el-form-item label="角色关键词" prop="key">
              <el-input class="search-inp" v-model="formData.key" placeholder="请输入关键字" clearable></el-input>
            </el-form-item>
          </el-form>

          <el-button class="btn-blue" type="primary" plain :icon="Search" @click="searchHandle">
            <el-icon>
              <Search />
            </el-icon>
            <span>查询</span>
          </el-button>
          <el-button class="btn-green" type="success" plain :icon="Plus" @click="addHandle">
            <el-icon>
              <Plus />
            </el-icon>
            <span>新增角色</span>
          </el-button>
        </div>
      </template>

      <commonTable :tableData="tableData" :tableHeader="tableHeader" :isLoading="isLoading">
        <template #operate="{ scope }">
          <!-- v-if="scope.id + '' !== '1'" -->
          <div class="btn-group">
            <el-tooltip content="编辑角色信息" placement="bottom">
              <el-button type="primary" plain circle @click="eidtRole(scope)">
                <el-icon>
                  <Edit />
                </el-icon>
              </el-button>
            </el-tooltip>

            <el-tooltip content="分配菜单" placement="bottom">
              <el-button type="warning" plain circle @click="assignMenus(scope)">
                <el-icon>
                  <EditPen />
                </el-icon>
              </el-button>
            </el-tooltip>

            <el-popconfirm title="你确定要删除该角色嘛?" @confirm="deletedRole(scope)" v-if="scope.id + '' !== '1'">
              <template #reference>
                <el-button type="danger" plain circle>
                  <el-icon>
                    <Delete />
                  </el-icon>
                </el-button>
              </template>
            </el-popconfirm>

          </div>
        </template>
      </commonTable>

      <template #footer>
        <div class="card-footer">
          <el-pagination background layout="total,prev, pager, next, sizes" :total="pagination.total"
            :page-sizes="pagination.pageSizes" :current-page="pagination.curPage" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" />
        </div>
      </template>
    </el-card>
  </div>
  <roleDialog :visible="roleDialogVisbile" :roleInfo="roleInfo" @closeDialog="closeDialog" @updateDialog="updateRole">
  </roleDialog>

  <AllocateMenuDialog :visible="menuDialogVisible" :menusInfo='menusInfo' @closeMenusDialog="closeMenusDialog">
  </AllocateMenuDialog>
</template>

<style lang="scss" scoped>
.role-container {

  .card-header {
    display: flex;

    .search-inp {
      width: 200px;
      margin-right: 10px;
    }

    :deep(.el-button) {
      color: #fff;
      width: 100px;
      height: 35px;
      font-size: 16px;
      border-color: #c6c6c6;
    }

  }

  .card-footer {
    display: flex;
    justify-content: flex-end;

  }
}


:deep(.el-form-item__label) {
  font-weight: 700;
}
</style>